<template>
  <div class="outer-input" :style="{width:`${width}%`}">
    <div class="input-title">
        <span class="need" v-if="struc?.must">*</span>
        <span class="label-name">{{ struc?.viewName }}</span>
    </div>
    <div class="input-contextPackage">
      <el-upload
          class="avatar-uploader"
          action="http://180.184.96.73/chain/fileUpLoad/uploadImage"
          :headers="{ token: token}"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          name="fileUpload"
        >
          <!-- <img v-if="valueImg.value" :src="valueImg.value" class="avatar"> -->
          <el-image
            v-if="valueImg.value"
            style="width: 80px; height: 80px; border-radius: 10px;"
            :src="valueImg.value"
            fit="cover">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
            </el-image>
          <span v-else class="upload-text">点击上传头像</span>
        </el-upload>
      <span class="errorhint" v-if="showError">{{
        struc?.errorHit
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { Picture } from '@element-plus/icons-vue'
import { defineComponent, onMounted, PropType, ref, reactive, computed } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"
import useUser from "../../hook/user";

export default defineComponent({
  components: {
		Picture
	},
  type: 667,
  name: "TCircular",
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
    },
    passWidth: {
			type: Number
		}
  },
  setup: (props, context) => {
    let showError = ref(false);
    const request = useRequet({ path: "" });
    let token = useUser().getToken()
    let valueImg: DataStruc = reactive(props.struc as DataStruc);
    const dataCheck = useDataCheck();
    let fileName = ref('')
    let check = () => {
      if(props.struc?.must) {
        if (props.struc?.value) {
          showError.value = false;
        } else {
          console.debug("检查出错：", showError);
          showError.value = true;
        }
      }
      return !showError.value;
    };
    const change = () => {
      console.log("执行了");
    };

    const inputValue = (e: string) => {
			console.debug("input事件触发", e)
      valueImg.value = e
    };
    const width = computed(() => props.passWidth)

    const handleAvatarSuccess = (res: any) => {
      valueImg.value = res.data && res.data.url
    }
    

    onMounted(() => {
      dataCheck.addDataCheck(check);
    });

    return { showError, check, change, inputValue, valueImg, fileName, width, handleAvatarSuccess, token};
  },

  methods: {
    out(event: MouseEvent) {
      if(!this.valueImg.must) {
					// console.log('判断', this.valueImg.must, this.showError)
					this.showError = false;
				} else {
					this.check()
				}
    },
  },
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 33.333%;
  padding-right: 10px;
  box-sizing: border-box;
  .input-title {
    padding-bottom: 10px;
    color: $regularText;
    .need {
      color: red;
    }
    .label-name {
      font-size: $fontSize-1
    }
  
  }

  .input-contextPackage {
    .errorhint {
      @extend .error;
      height: 10px;
      display: block;
      line-height: 1;
    }
  }
}

.avatar-uploader {
  width: 80px;
  height: 80px;
  border: 1px solid $a7-Color;
  position: relative;
  border-radius: 10px;
  font-size: $fontSize;
  // .avatar {
  //   width: 100%;
  //   height: 100px;
  //   border-radius: 10px;
  // }
  .upload-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: $regularText;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 15px;
  }
}
</style>
